<template>
    <div class="spike-zone">
        <!-- <div class="header bg-grey">
            <div class="header-left">
                <div class="back" @click="handleReturn">
                    <i class="i-left"></i>
                </div>
            </div>
            <div class="header-middle m-l-12"> <span class="font-black">商品详情</span></div>
            <div class="header-right"></div>
        </div> -->
        <div class="content">
            <div class="spike-list">
                <!--<div class="spike-list__item" v-for="val in list">-->
                    <!--<div class="left">-->
                        <!--<img v-lazy="imageShow(val.thumb)">-->
                    <!--</div>-->
                    <!--<div class="right">-->
                        <!--<div class="title">{{val.name}}</div>-->
                        <!--<div class="discount-icon">-->
                            <!--<img :src="sendBdcUrl">-->
                        <!--</div>-->
                        <!--<div>-->
                            <!--<div class="tags">-->
                                <!--<span>包邮</span>-->
                                <!--<span class="count">共{{val.goods_number}}件</span>-->
                            <!--</div>-->
                            <!--<div class="price">-->
                                <!--<span><span class="money">￥</span>{{val.retail_price}}</span>-->
                            <!--</div>-->
                            <!--<div class="salse">-->
                                <!--<span><del>￥{{val.market_price}}</del></span>-->
                                <!--<button class="btn-buy" @click="handleBuy(val.id)" v-if="val.goods_number>0">立即购买</button>-->
                                <!--<button class="btn-buy-disabled" v-else>已抢完</button>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <van-pull-refresh v-model="isDownLoading" @refresh="onRefresh">
                    <van-list v-model="isUploading" :finished="finished"  :finished-text="finished_text" @load="onLoad" :offset=10>
                        <div class="spike-list__item" v-for="val in list">
                            <div class="left">
                                <img v-lazy="imageShow(val.thumb)">
                            </div>
                            <div class="right">
                                <div class="title">{{val.name}}</div>
                                <div>
                                    <div class="tags">
                                        <span>包邮</span>
                                        <span class="count">共{{val.goods_number ? val.goods_number : 0}}件</span>
                                    </div>
                                    <div class="price">
                                        <span><span class="money">￥</span>{{val.retail_price}}</span>
                                    </div>
                                    <div class="salse">
                                        <span><del>￥{{val.market_price}}</del></span>
                                        <button class="btn-buy" @click="handleBuy(val.id)">立即购买</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
                <!--<div class="spike-list__item">-->
                    <!--<div class="left">-->
                        <!--<img src="../../assets/images/2.png">-->
                    <!--</div>-->
                    <!--<div class="right">-->
                        <!--<div class="title">和田玉圆牌牌新品️S925纯银镶嵌扣 头伴镶碧玉简约大方</div>-->
                        <!--<div>-->
                            <!--<div class="tags">-->
                                <!--<span>包邮</span>-->
                                <!--<span class="count">共1件</span>-->
                            <!--</div>-->
                            <!--<div class="price">-->
                                <!--<span><span class="money">￥</span>999</span>-->
                            <!--</div>-->
                            <!--<div class="salse">-->
                                <!--<span><del>￥1024</del></span>-->
                                <!--<button class="btn-buy">立即购买</button>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="spike-list__item">-->
                    <!--<div class="left">-->
                        <!--<img src="../../assets/images/2.png">-->
                    <!--</div>-->
                    <!--<div class="right">-->
                        <!--<div class="title">和田玉圆牌牌新品️S925纯银镶嵌扣 头伴镶碧玉简约大方</div>-->
                        <!--<div>-->
                            <!--<div class="tags">-->
                                <!--<span>包邮</span>-->
                                <!--<span class="count">共1件</span>-->
                            <!--</div>-->
                            <!--<div class="price">-->
                                <!--<span><span class="money">￥</span>999</span>-->
                            <!--</div>-->
                            <!--<div class="salse">-->
                                <!--<span><del>￥1024</del></span>-->
                                <!--<button class="btn-buy">立即购买</button>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="spike-list__item">-->
                    <!--<div class="left">-->
                        <!--<img src="../../assets/images/2.png">-->
                    <!--</div>-->
                    <!--<div class="right">-->
                        <!--<div class="title">和田玉圆牌牌新品️S925纯银镶嵌扣 头伴镶碧玉简约大方</div>-->
                        <!--<div>-->
                            <!--<div class="tags">-->
                                <!--<span>包邮</span>-->
                                <!--<span class="count">共1件</span>-->
                            <!--</div>-->
                            <!--<div class="price">-->
                                <!--<span><span class="money">￥</span>999</span>-->
                            <!--</div>-->
                            <!--<div class="salse">-->
                                <!--<span><del>￥1024</del></span>-->
                                <!--<button class="btn-buy">立即购买</button>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            </div>
        </div>
    </div>
</template>

<script>
import { autoLogin } from '@/utils'     
import { getBanners, getCategory, getGoodsSpike, getGoodsList } from '@/api/goods'
export default {
    name: "spikeList",
    data() {
        return {
            isDownLoading: false,
            isUploading: false,
            finished: false,
            finished_text: '没有更多了',
            list: [],
            isFirst: true,
            totalPages: 1,
            query: {
                page: 0,
                limit: 10,
                sidx: ""
            },
            sendBdcUrl: 'https://images.bdchats.com/prod/upload/product_discount.png'
        }
    },
    created() {
        autoLogin()
        // this.getSpikeList()
    },
    methods: {
        handleReturn() {
            this.$router.go(-1)
        },
        imageShow(src){
            const img = {}
            img.loading = require('@/assets/images/loading.gif');
            img.src = src;
            return img
        },
        getSpikeList() {
            const self = this
            const data = {}
            data.page = 1
            data.sidx = ''
            data.limit = 100
            getGoodsSpike(data).then(response=>{
                if (response.data) {
                    for(const item of response.data) {
                        const temp = {}
                        temp.id = item.id
                        temp.thumb = item.primary_pic_url
                        temp.name = item.name
                        temp.market_price = item.market_price
                        temp.retail_price = item.retail_price
                        temp.goods_number = item.goods_number
                        self.list.push(temp)
                    }
                }
            })
        },
        handleBuy(id) {
            sessionStorage.setItem('isSpike',1)
            this.$router.push('/detail/'+id)
        },
        async getList() {
            const self = this
            await getGoodsSpike(this.query).then(response=> {
                if (response.data) {
                    if (self.isFirst) {
                        self.isFirst = false
                        self.totalPages = response.data.spikePage.totalPage
                    }
                    if (self.list.length) {
                        if (self.isUploading) { //上拉加载
                            if (response.data.spikePage.list && response.data.spikePage.list.length > 0) {
                                for(const item of response.data.spikePage.list) {
                                    const temp = {}
                                    temp.id = item.id
                                    temp.thumb = item.primary_pic_url
                                    temp.name = item.name
                                    temp.market_price = item.market_price
                                    temp.retail_price = item.retail_price
                                    temp.goods_number = item.goods_number
                                    self.list.push(temp)
                                }
                            }
                            this.$nextTick(() => {
                                self.isUploading = false
                            })
                            if (self.list.length >= response.count) {
                                self.isUploading = false
                                self.finished = true
                            }
                        }

                        if (self.isDownLoading) { //关闭下拉刷新
                            self.isDownLoading = false
                            self.isUploading = false
                            self.list = [];
                            if (response.data) {
                                for(const item of response.data.spikePage.list) {
                                    const temp = {}
                                    temp.id = item.id
                                    temp.thumb = item.primary_pic_url
                                    temp.name = item.name
                                    temp.market_price = item.market_price
                                    temp.retail_price = item.retail_price
                                    temp.goods_number = item.goods_number
                                    self.list.push(temp)
                                }
                            }
                            if (self.finished) {
                                self.finished = false
                            }
                        }
                    } else {
                        self.finished = false
                        if (response.data && response.data.spikePage.list.length > 0) {
                            for(const item of response.data.spikePage.list) {
                                const temp = {}
                                temp.id = item.id
                                temp.thumb = item.primary_pic_url
                                temp.name = item.name
                                temp.market_price = item.market_price
                                temp.retail_price = item.retail_price
                                temp.goods_number = item.goods_number
                                self.list.push(temp)
                            }
                            if (response.data.spikePage.totalCount === 0) {
                                self.finished_text = "暂无数据"
                                self.finished = true
                            }
                            if (self.list.length >= response.data.spikePage.totalCount) {
                                self.finished = true
                            }
                        }
                        self.isUploading = false
                        self.isDownLoading = false
                    }
                    console.log(self.list)
                }
            })
        },
        onLoad() {
            if(this.query.page < this.totalPages) {
                this.query.page = this.query.page + 1
                this.isUploading = true
                this.getList()
            }else{
                this.finished = true
                this.isDownLoading = false
                this.isUploading = false
            }
        },
        onRefresh() {
            this.finished = false
            this.isUploading = false
            this.query.page = 1
            this.getList()
        }
    }

}
</script>
